<template>
  <div id="index">
    <carousel :bannerList="bannerList" />
    <div class="hot">
      <h3 class="index-title-h3">热门公开课</h3>
      <course-list :courseList="hotList" @click="toDetail"/>
      <el-empty v-show="!hotList.length" />
    </div>

    <div class="new">
      <h3 class="index-title-h3" style="border-left-color:rgb(220, 208, 65);">最新公开课</h3>
      <course-list :courseList="newList" @click="toDetail"/>
      <el-empty v-show="!newList.length" />
    </div>
    <!-- 固钉 -->
    <div class="rigdown">
      <el-tooltip class="item" effect="dark" content="通知/公告" placement="top">
        <el-badge is-dot class="item">
          <el-button
            plain
            icon="el-icon-chat-dot-round"
            type="primary"
            size="medium"
            @click="showNotice"
          ></el-button>
        </el-badge>
      </el-tooltip>
    </div>
    <el-dialog title="通知公告" width="60%" :visible.sync="noticeDialog">
      <el-divider content-position="left">通知</el-divider>
      <el-table :data="notice1" style="width: 100%">
        <el-table-column prop="noTitle" label="通知" align="center" width="80"></el-table-column>
        <el-table-column prop="noContent" align="center" label="通知内容"></el-table-column>
        <el-table-column prop="updateTime" label="日期" align="center" width="120"></el-table-column>
        <el-table-column prop="updateTime" align="center" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.noIsTop==1" type="warning">置顶</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-divider content-position="left">公告</el-divider>
      <el-table :data="notice2" style="width: 100%">
        <el-table-column prop="noTitle" label="公告" align="center" width="80"></el-table-column>
        <el-table-column prop="noContent" align="center" label="公告内容"></el-table-column>
        <el-table-column prop="updateTime" label="日期" align="center" width="120"></el-table-column>
        <el-table-column prop="updateTime" align="center" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.noIsTop==1" type="warning">置顶</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 回到顶部 -->
    <el-backtop target="#index" :right="45"></el-backtop>
  </div>
</template>

<script>
import Carousel from "@/components/Carousel";
import CourseList from "../Personal/child/comp/CourseList";
import { getCourseHistoryById } from "@/api/course";
import { getNotice, getBanner, getHotCourse, getNewCourse } from "@/api/home";
export default {
  name: "index",
  components: { Carousel, CourseList },
  data() {
    return {
      bannerList: [],
      hotList: [],
      newList: [],
      noticeDialog: false,
      // 通知
      notice1: [],
      // 公告
      notice2: []
    };
  },
  created() {
    getBanner(4).then(res => {
      if (res.code == 200 && res.data.length > 0) {
        this.bannerList = res.data.map(item => item.bnUrl);
      } else {
        this.bannerList = [
          require("@/assets/carousel/1.png"),
          require("@/assets/carousel/2.png"),
          require("@/assets/carousel/3.png"),
          require("@/assets/carousel/4.png")
        ];
      }
    });
    getHotCourse(8).then(res => {
      if (res.code == 200) this.hotList = res.data;
    });
    getNewCourse(8).then(res => {
      if (res.code == 200) this.newList = res.data;
    });
  },
  methods: {
    // 展示通知公告
    showNotice() {
      this.noticeDialog = true;
      // 通知
      this.getNotice({ size: 3, type: 1 });
      // 公告
      this.getNotice({ size: 3, type: 2 });
    },
    // 获取通知公告
    getNotice(query) {
      getNotice(query).then(res => {
        if (res.code == 200) {
          console.log(res.data);
          if (query.type == 1) {
            this.notice1 = res.data;
          } else {
            this.notice2 = res.data;
          }
        }
      });
    },
    // 课程详情
    toDetail(id) {
      getCourseHistoryById(id).then(res => {
        const result = res.data;
        const { href } = this.$router.resolve({
          path: "/course",
          query: {
            courseId: id,
            chapterId: result.chapterId,
            videoId: result.videoId
          }
        });
        window.open(href, "_blank");
      });
    },
  }
};
</script>

<style scoped>
#index {
  height: 100%;
  overflow-y: scroll;
}
.rigdown {
  position: fixed;
  bottom: 100px;
  right: 40px;
  position: absolute;
}

.index-title-h3 {
  font-size: 22px;
  font-weight: 400;
  color: #1f2f3d;
  border-left: solid 10px #2ce8b4;
  padding-left: 10px;
}
.hot,
.new {
  padding: 0 10%;
}
</style>
